<template>
  <div class="friendList">
    <el-scrollbar style="height: 100%">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        style="margin-bottom: 10px"
      >
      </el-input>
      <el-tree
        class="filter-tree"
        :data="chatList"
        :props="userListProps"
        accordion
        @node-click="choseOneToChat"
        :filter-node-method="matchFilter"
      >
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.friendList {
  height: 100%;
  width: 25%;
  display: block;
  padding: 10px;
  border: 2px solid rgb(54, 173, 253);
  // background-color: RGB(54, 173, 253);
  box-sizing: border-box;
}
</style>

<script>
import RoleEnum from "@/utils/enum/roleEnum"

export default {
  mounted() {
    this.getUserList();
  },
  data() {
    return {
      RoleEnum: RoleEnum,
      filterText: "",
      userList: [],
      userListProps: {
        label: "name",
        children: "userListVos",
      },
    };
  },
  methods: {
    getUserList() {
      this.$store.dispatch("request/get", "/chat/list/friend").then((data) => {
        this.userList = data;
      });
    },
    choseOneToChat(data) {
      if (data.userListVos.length < 1) {
        this.$emit("updateData", data.userBasicInfoVo);
      }
    },
    // 遍历节点判断是否匹配搜索关键字
    matchFilter(node, key) {
      if (node.userListVos.length>0) {
        return node.userListVos.filter((child) => {
          return this.matchFilter(child, key);
        });
      } else {
        // 判断是否包含关键词
        return node.name.toLowerCase().includes(key);
      }
    },
  },
  computed: {
    // chatList() {
    //   const filterText = this.filterText.trim().toLowerCase();
    //   if (filterText === "") {
    //     return this.userList;
    //   }
    //   console.log(this.userList)
    //   return this.userList.filter((node) =>
    //     node.name.toLowerCase().includes(filterText)
    //   );
    // },

    // 根据搜索关键字过滤树形结构
    chatList() {
      if (this.filterText === '') {
        return this.userList
      }
      const key = this.filterText.toLowerCase()
      return this.userList.filter((node) => {
        return this.matchFilter(node, key)
      })
    },
  },
};
</script>

<style>
</style>